<template>
  <div>
    <a-modal v-model:visible="visible" fullscreen :footer="false">
      <template #title>奖励设置</template>
      <!-- CRUD 组件 -->
      <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
        <!-- 搜索区 tableSearch -->
        <template #tableSearch>
          <a-col :sm="8" :xs="24">
            <a-form-item field="red_switch" label="状态">
              <sa-select v-model="searchForm.red_switch" dict="data_status" placeholder="请选择状态" />
            </a-form-item>
          </a-col>
        </template>
        <!-- Table 自定义渲染 -->
         <template #room_id="{ record }">
          {{record.room_id==0?'全局':record.room_id}}
        </template>
        <template #reward_switch="{ record }">
          {{record.reward_switch==1?'依据设置发放':'消费等级发放'}}
        </template>
        <template #status="{ record }">
          <sa-switch v-model="record.status" @change="changeStatus($event, record.id)"></sa-switch>
        </template>
        <template #operationAfterExtend="{ record }">
          <a-popconfirm
          content="确定要删除该数据吗?"
          position="bottom"
          @ok="deleteAction(record)">
          <a-link type="primary" v-auth="options.delete.auth || []">
            <icon-delete /> 删除
          </a-link>
        </a-popconfirm>
        </template>
      </sa-table>
    </a-modal>

    <!-- 编辑表单 -->
    <edit-form ref="editRef" @success="refresh" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import api from '@/api/live/live'
import { Message } from '@arco-design/web-vue'
import EditForm from './edit-reward.vue'

const crudRef = ref()
const editRef = ref()
const visible = ref(false)

// 搜索表单
const searchForm = ref({
  room_id:'0',
  red_switch: '',
})

// 修改状态
const changeStatus = async (status, id) => {
  const response = await dict.changeStatus({ id, status })
  if (response.code === 200) {
    Message.success(response.message)
    crudRef.value.refresh()
  }
}

// 打开弹框
const open = () => {
  visible.value = true
}

// 设置表单数据
const setFormData = (data) => {
  searchForm.value.room_id = data
  crudRef.value?.refresh()
}

// SaTable 基础配置
const options = reactive({
  api: api.rewardList,
  rowSelection: { showCheckedAll: true },
  singleLine: true,
  add: {
    show: true,
    auth: ['/core/dictType/save'],
    func: async () => {
      editRef.value?.open()
      editRef.value?.setroomid(searchForm.value.room_id)
    },
  },
  edit: {
    show: true,
    auth: ['/core/dictType/update'],
    func: async (record) => {
      editRef.value?.open('edit')
      editRef.value?.setFormData(record)
    },
  },
  delete: {
    show: false,
  },
})

// 删除操作
const deleteAction = async (record) => {
  const resp = await api.deleteReward({ config_id: record.id })
  if (resp.code === 200) {
    Message.success(`删除成功！`)
    crudRef.value?.refresh()
  }
}

// SaTable 列配置
const columns = reactive([
  { title: '直播间ID', dataIndex: 'room_id', width: 180 },
  { title: '发放依据', dataIndex: 'reward_switch', width: 220 },
  { title: '时长签到(分)', dataIndex: 'look_time', width: 120 },
  { title: '红包发放', dataIndex: 'red_switch',dict: 'data_status', type:'dict' , width: 180 },
  { title: '红包金额', dataIndex: 'red_price', width: 180 },
  { title: '打卡次数', dataIndex: 'call_roll_count', width: 180 },
])

// SaTable 数据请求
const refresh = async () => {
  crudRef.value?.refresh()
}

// 页面加载完成执行
defineExpose({ open ,setFormData})
</script>

<style scoped></style>
